<!-- 下载页面 -->
<template>
    <div class="download">
        <div class="downHead">
            <img class="downloadLogo" src="@/assets/download/downloadLogo.png" alt="">
            <div class="title">喝彩艺术品APP</div>
            <div class="desc">hecaiyishupin</div>
        </div>
        <div class="downBtn">
            <div :class="downAddress.userAgent == userAgent.IOS ? 'item' : 'active item'" @click="goDownload">
                <!-- <img v-if="downAddress.userAgent == userAgent.IOS" src="@/assets/download/activeIosIcon.png" alt="">
                <img v-else src="@/assets/download/iosIcon.png" alt=""> -->
                <span>IOS版下载</span>
            </div>
            <div :class="downAddress.userAgent == userAgent.ANDROID ? 'item' : 'active item'" @click="goDownload">
                <!-- <img v-if="downAddress.userAgent == userAgent.ANDROID" src="@/assets/download/activeAndroidIcon.png" alt="">
                <img v-else src="@/assets/download/androidIcon.png" alt=""> -->
                <span>安卓版下载</span>
            </div>
        </div>
        <div class="wechatBox" v-if="isWechat">
            <img src="@/assets/download/dynamicImg.gif" alt="">
            <div>
                <p>请点击左上角“…”在浏览器打开此页面。</p>
                <p>(备注：苹果手机用户请在Safari中打开此页面）</p>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, reactive, onMounted , getCurrentInstance } from 'vue';
import { getUserAgent } from '@/utils/index';
import { userAgent } from '@/utils/types';
import storage from 'store';
import { ACCESS_TOKEN , BRANDID } from '@/utils/types';
import { NavBar } from 'vant';
export default {
    components:{
        [NavBar.name]:NavBar,
    },
    setup() {
        const { proxy } = getCurrentInstance();
        const downAddress = reactive({
            android: undefined,
            ios: undefined,
            userAgent: undefined,
        })
        const isWechat = ref(false)
        const brandId = proxy.$route.params.brandId
        console.log(proxy.$route.params)
        // 获取当前用户终端类型
        downAddress.userAgent = getUserAgent()
        if(downAddress.userAgent == userAgent.WECHAT){
            isWechat.value = true
            return {
                userAgent,
                downAddress,
                goDownload,
                isWechat,
            }
        }
        // 获取系统的token
        function getToken(){
            proxy.$http.brandApi.getToken(brandId)
            .then(res=>{
                if(res.success){
                    storage.set(ACCESS_TOKEN,res[ACCESS_TOKEN], res.expires_in)
                    proxy.$http.loginApi.getAppDownload(1)
                    .then(res=>{
                        console.log(res)
                        if(res.data.length == 0){
                            proxy.$toast({position: 'bottom',message:'暂未获取到下载地址！'})
                        }else{
                            downAddress.android = res.data[0].androidDownloadUrl
                            downAddress.ios = res.data[0].iosDownloadUrl
                        }
                    })
                }
            })
        }
        // 跳转下载页面
        function goDownload(){
            switch(downAddress.userAgent){
                case userAgent.ANDROID:
                    if(downAddress.android){
                        window.location.href = downAddress.android;
                    }else{
                        proxy.$toast({position: 'bottom',message: '暂未获取到下载链接！'})
                    }
                    break;
                case userAgent.IOS:
                    if(downAddress.ios){
                        window.location.href = downAddress.ios;
                    }else{
                        proxy.$toast({position: 'bottom',message: '暂未获取到下载链接！'})
                    }
                    break;
                default:
                    proxy.$toast({position: 'bottom',message: '暂未获取到当前终端设备的型号！'})
                    break;
            }
        }
        // 页面加载后获取APP的下载地址
        onMounted(()=>{
            getToken()
        })

        const onClickLeft = () => history.back();
        return {
            userAgent,
            downAddress,
            goDownload,
            isWechat,
            onClickLeft,
        }
    }
}

</script>
<style scoped>
.download{
    min-height: 100vh;
    background-size: 100% 100%;
    font-size: 15px;
    color: #222222;
    font-weight: 500;
    background: #FFFFFF;
    padding-top: 80px;
    box-sizing: border-box;
}
.downHead{
    height: 275px;
    width: 251px;
    margin: 0px auto 0;
    margin-bottom: 20vh;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background: url('../../assets/download/headBg.png');
    background-size: 100%;
}
.downloadLogo{
    width: 120px;
    margin-bottom: 10px;
}
.title{
    font-size: 18px;
    font-weight: bold;
    color: #333333;
}
.desc{
    font-size: 10px;
    color: #333333;
}
.downBtn{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.item{
    /* background: linear-gradient(to right,#A07D41 ,#FDDDAA); */
    color: #FFFFFF;
    width: 308px;
    height: 49px;
    margin-bottom:35px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--themeColor);
}
.item img{
    width: 26px;
    height: 32px;
    margin-right: 21px;
    margin-left: 83px;
}
.download .active{
    background: #FFFFFF;
    /* background: linear-gradient(to left,#A07D41 ,#FDDDAA); */
    color: var(--themeColor);
    border: 1px solid var(--themeColor);
}

.wechatBox{
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.8);
    color: #FFFFFF;
}
.wechatBox>div{
    text-indent: 30px;
    line-height: 20px;
    font-size: 14px;
}

.download /deep/ .van-nav-bar__content{
    background: #232328;
}
.download /deep/ .van-badge__wrapper{
    color: #FFFFFF;
}
.download /deep/ .van-nav-bar__title{
    color: #FFFFFF;
}
</style>